<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器组合 */
        /* div.box{
            color: red;
        } 
        .box.blue{
            width:100px;
            height:100px;
            background-color:blue;
        }
        */
        /* class扩展 */
        /* 
        1.一个元素可以有多个class值 
        2.一个class值可以包含多个元素
        3.可以定义一些基础的class类的样式，然后添加个元素
        */
        
        .box{
            width: 200px;
            height: 100px;
        }
        .blue{
            background-color: blue;
        }
        .red{
            background-color: red;
        }
        .border{
            border: 1px solid rgb(99, 240, 221);
        }
        .left{
            text-align: left; 
        }
        .right{
            text-align: right; 
        }
        .center{
            text-align: center; 
        }

        
    </style>
</head>
<body>
    <div class="box" id="b1">i am spider man</div>
    <p class="box">i am super man</p>
    <div> i am iron man</div>
    <hr>
    <div class="box blue border" >box red border</div>
    <div class="box red border center" >box red border</div>
    <div class="box  border blue right" >box  border</div>
</body>
</html>